@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body">
            <div class="panel-header">
                <div class="panel-title">用户列表 </div>
                <el-tabs v-model="tabValue" type="card" @tab-click="search()">
                    <el-tab-pane label="全部" name="0"></el-tab-pane>
                    <el-tab-pane label="赏金猎人" name="1"></el-tab-pane>
                    <el-tab-pane label="团长" name="2"></el-tab-pane>
                    <el-tab-pane label="悬赏主" name="3"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                   <!--  <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button> -->
                    <el-button type="primary" icon="fa fa-plus" @click="exports()" size="small"> 导出</el-button>
                    <el-button type="info" icon="fa fa-trash" @click="multiDelete()" size="small"> 删除</el-button>
                </div>
                <div class="panel-search">
                	
                    
                    <div class="panel-search-item">
                    	
                        <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入手机账号或者昵称" class="input-with-select">
                            <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div class="panel-search-item">
                		<el-cascader size="medium" clearable placeholder="全部"
                                     separator=">"
                                     :show-all-levels="false"
                                     :options="status"
                                     @change="statuscaderChange"
                                     v-model="statuscader">
                        </el-cascader>
                	
                	</div>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          @selection-change="handleSelectionChange"
                          :data="listData.data" border>
                    <el-table-column align="center" type="selection" width="30"></el-table-column>
                    <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                    <el-table-column align="center" prop="avatar" label="头像" width="80">
                        <template slot-scope="scope"> <img :src="scope.row.avatar" style="height: 60px;width: 60px;border-radius: 50%"/> </template>
                    </el-table-column>
                   <el-table-column align="center" prop="nickname" label="昵称" width="120"></el-table-column>
                   
                   <el-table-column align="center" label="认证信息" width="280">
                   		<template slot-scope="scope"> 
                    	 	<span v-if="scope.row.true_name">【真实姓名】</span><span v-if="scope.row.true_name" v-html="scope.row.true_name" style="color:#67C23A"></span><br>
                    	 	<span v-if="scope.row.IDcard">【身份证号】</span><span v-if="scope.row.IDcard" v-html="scope.row.IDcard" style="color:#67C23A"></span>
                    	</template>
                   </el-table-column>
                    
                    <el-table-column align="center" prop="mobile" label="手机号" width="180"></el-table-column>
                    <el-table-column align="center" prop="balance" label="已提现金额/账户余额" width="180">
                    	 <template slot-scope="scope"> 
                    	 	<span v-html="scope.row.amount" style="color:red"></span><span>/</span> 
                    	 	<span style="color:#67C23A" v-html="scope.row.balance"></span>
                    	 </template>
                    </el-table-column>
                    
                    <el-table-column align="center" prop="type_text" label="类型" width="90">
                        <template slot-scope="scope"> <span v-html="scope.row.type_text"></span> </template>
                    </el-table-column>
                    
                     <el-table-column align="center"  label="完成（发布）任务数量" width="170">
                        <template slot-scope="scope"> 
                        	<span v-if="scope.row.type == 3" v-html="scope.row.publish_num"></span>
                        	<span v-else v-html="scope.row.reward_num"></span>  
                        </template>
                    </el-table-column>
                    
                    <el-table-column align="center" prop="status_text" label="状态" width="80">
                        <template slot-scope="scope"> <span v-html="scope.row.status_text"></span> </template>
                    </el-table-column>
                  
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status == 1" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain> 通过</el-button>
                            <el-button v-if="scope.row.status == 1" @click="lock(scope.row.id)" icon="fa fa-lock" type="danger" size="mini" plain> 拒绝</el-button>
                            <el-button v-if="scope.row.status == 4" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain>取消拉黑</el-button>
                         
                            <el-button @click="edit(scope.row.id)" icon="fa fa-edit" type="primary" size="mini" plain> 查看</el-button>
                            <el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain>拉黑</el-button>
                            <!-- <el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData && listData.total">
                    <div class="pagination-total">共 <em> @{{listData.total}} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 表单弹窗-->
        <el-dialog
                v-if="dialog.show"
                :title="dialog.title"
                :top="dialog.top"
                :visible.sync="dialog.show"
                :width="dialog.width">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item :rules="[{ required: true, message: '请输入用户名', trigger: 'blur'}]" label="用户名：" prop="true_name">
                    <el-input clearable v-model="form.true_name" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入手机账号', trigger: 'blur'}]" label="手机号：" prop="mobile">
                    <el-input clearable v-model="form.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入用户昵称', trigger: 'blur'}]" label="昵称：" prop="nickname">
                    <el-input clearable v-model="form.nickname" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
               
                <el-form-item :rules="[{ required: true, message: '请输入用户昵称', trigger: 'blur'}]" label="身份证号码：" prop="IDcard">
                    <el-input clearable v-model="form.IDcard" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
               
               
                <el-form-item label="邮箱：" prop="email">
                    <el-input clearable v-model="form.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item required label="类型：" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="1" border>赏金猎人</el-radio>
                        <el-radio :label="2" border>团长</el-radio>
                        <el-radio :label="3" border>悬赏主</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态：" required prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1" border>待审核</el-radio>
                        <el-radio :label="2" border>正常</el-radio>
                        <el-radio :label="3" border>驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
              </span>
        </el-dialog>
    </div>
@endsection
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    tabValue: 0,//tab
                    statuscader:[],
                    params: {page: 1, kwd: '', status: 0},
                    status:[{
                    			"value": 1,
                    			"label": "待审核",
                    			
                    		},{
                    			"value": 2,
                    			"label": "正常",
                    			
                    		},{
                    			"value": 3,
                    			"label": "驳回",
                    			
                    		},{
                    			"value": 4,
                    			"label": "拉黑",
                    			
                    		}],
                    loading: false,
                    dialog: {
                        title: '',
                        top: '15vh',
                        show: false,
                        width: '600px'
                    },
                    multipleSelection:[],//多选项
                    form:null,
                }
            },
            created(){
                this.list();
            },
            methods: {
                //分页
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
                //分类筛选
                statuscaderChange(){
                    if (this.statuscader.length) {
                        this.params.status = this.statuscader[this.statuscader.length-1];
                       // alert(this.params.status);
                    } else {
                        this.params.status = 0;
                    }
                    this.search();
                },
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('admin.user.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data;
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //新增
                create(){
                    this.form = {
                        id: 0,
                        nickname: '',
                        mobile: '',
                        email: '',
                        username: '',
                        type: 1,
                        status: 2,
                        password: '',
                        _token: "{{csrf_token()}}"
                    };
                    this.dialog.title = '新增用户';
                    this.dialog.show = true;
                },
                //编辑
                edit(id){
                    window.location.href = "{{ route('admin.user.edit') }}" + '?id=' + id;
                },
                //导出
                exports(){
                    if(this.multipleSelection.length == 0){
                        var msg = '确定要导出所有的用户信息吗？';
                    }else {
                        var msg = '确定要导出选择的用户信息吗？';
                    }
                    
                    this.$confirm(msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                       // alert(this.params.type);
                        window.location.href = "{{ route('admin.user.exports') }}"+'?type='+this.params.type+'&ids='+this.multipleSelection.join('-');
                    }).catch(() => {});
                },
                //筛选
                search(){
                    this.params.page = 1;
                    switch (this.tabValue) {
                        case '1':                          
                            this.params.type = 1;
                            break;
                        case '2':                          
                            this.params.type = 2;
                            break;
                        case '3':                           
                            this.params.type = 3;
                            break;                       
                        default:                          
                            this.params.type = 0;
                            break;
                    }
                    this.list();
                },
                //拒绝
                lock(id){
                    let that = this;
                    $.post("{{ route('admin.user.lock') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.list();
                        }
                    },'JSON');
                },
                //激活
                active(id){
                    let that = this;
                    $.post("{{ route('admin.user.active') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.list();
                        }
                    },'JSON');
                },
                
                //更新
                update(){
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let that = this;
                            $.post("{{ route('admin.user.update') }}",this.form,function (res) {
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        type: 'success',
                                        duration: '1000',
                                        message: res.msg,
                                        onClose:() =>{
                                            that.dialog.show = false;
                                            that.list();
                                        }
                                    });
                                }
                            },'JSON');
                        }
                    });
                },
                // 多选删除
                multiDelete(){
                    if(this.multipleSelection.length == 0){
                        this.$message.error('请至少选择一项你要删除的项');return false;
                    }
                    this.destroy(this.multipleSelection);
                },
                handleSelectionChange(val) {
                    let select = [];
                    if(val.length > 0){
                        val.filter((item)=>{
                            if(select.indexOf(item.id) === -1){
                                select.push(item.id)
                            }
                        });
                        this.multipleSelection = select;
                    }else{
                        this.multipleSelection = [];
                    }
                },
                //删除
                destroy(id){
                    let that = this;
                    this.$confirm('确定要拉黑该用户吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.user.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
            }
        });
    </script>
@endsection
